<template>
    <div class="article-edit">
        <el-card class="!border-none" shadow="never">
            <el-page-header :content="$route.meta.title" @back="$router.back()" />
        </el-card>
        <el-card class="mt-4 !border-none" shadow="never">
            <el-form
                ref="formRef"
                class="ls-form"
                :model="formData"
                label-width="85px"
                :rules="rules"
            >
                <div class="xl:flex">
                    <div>
                        <el-form-item label="会员名称" prop="name">
                            <div class="w-80">
                                <el-input
                                    v-model="formData.name"
                                    placeholder="请输入"
                                    type="input"
                                    clearable
                                />
                            </div>
                        </el-form-item>
                        <el-form-item label="会员分类" prop="equity">
                            <el-select
                                class="w-80"
                                v-model="formData.equity"
                                placeholder="请选择会员分类"
                                clearable
                            >
                                <el-option
                                    v-for="item in optionsData"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
						<el-form-item label="价格" prop="price">
								<el-input
								    v-model="formData.price"
								    placeholder="请输入价格"
								    type="input"
								    clearable
								/>
						</el-form-item>
						<el-form-item label="画线价格" prop="huaxian">
								<el-input
								    v-model="formData.huaxian"
								    placeholder="请输入画线价格"
								    type="input"
								    clearable
								/>
						</el-form-item>
                        <el-form-item label="详情" prop="title">
                            <div class="w-80">
                               <el-input
                                   v-model="formData.title"
                                   placeholder="请输入详情"
                                   type="input"
                                   clearable
                               />
                            </div>
                        </el-form-item>
						<el-form-item label="到期形式" prop="type">
						    <el-select
						        class="w-80"
						        v-model="formData.type"
						        placeholder="请选择到期形式分类"
						        clearable
						    >
						        <el-option
						            v-for="item in optionsData1"
						            :key="item.id"
						            :label="item.name"
						            :value="item.id"
						        />
						    </el-select>
						</el-form-item>
						<el-form-item label="时间" prop="vip_time" v-if="formData.type==1">
						    <div class="w-80">
						       <el-input
						           v-model="formData.vip_time"
						           placeholder="请输入时间,如30天就输入30"
						           type="input"
						           clearable
						       />
						    </div>
						</el-form-item>
						<el-form-item label="次数" prop="cishu" v-if="formData.type==2">
						    <div class="w-80">
						       <el-input
						           v-model="formData.cishu"
						           placeholder="请输入时间,如1次就输入1"
						           type="input"
						           clearable
						       />
						    </div>
						</el-form-item>
                    </div>
                </div>
            </el-form>
        </el-card>
        <footer-btns>
            <el-button type="primary" @click="handleSave">保存</el-button>
        </footer-btns>
    </div>
</template>

<script lang="ts" setup name="articleListsEdit">
import type { FormInstance } from 'element-plus'
import { useDictOptions } from '@/hooks/useDictOptions'
import { articleDetail, articleEdit, articleAdd, articleCateAll ,vipAdd,vipDetail,vipEdit } from '@/api/article'
import useMultipleTabs from '@/hooks/useMultipleTabs'
import { onMounted } from "vue";


const route = useRoute()
const router = useRouter()
const formData = reactive({
    id: '',
	name:'',
	price:'',
	equity:'',
	title:'',
	huaxian:'',
	type:null,
	cishu:null,
	vip_time:null
})
// const qiyexinxi = reactive({
//   data:""
// })



const optionsData=ref([{
	id:"1",
	name:'发布信息置顶'
},
{
	id:"2",
	name:'查看联系方式'
}])


const optionsData1=ref([{
	id:"1",
	name:'时间'
},
{
	id:"2",
	name:'次数'
}])


const { removeTab } = useMultipleTabs()
const formRef = shallowRef<FormInstance>()
const rules = reactive({
    title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
    cid: [{ required: true, message: '请选择文章栏目', trigger: 'blur' }]
})

const getDetails = async () => {
    const data = await vipDetail({
        id: route.query.id
    })
    Object.keys(formData).forEach((key) => {
        //@ts-ignore
        formData[key] = data[key]
    })
}

// const { optionsData } = useDictOptions<{
//     article_cate: any[]
// }>({
//     article_cate: {
//         api: articleCateAll
//     }
// })

const handleSave = async () => {
    await formRef.value?.validate()
    if (route.query.id) {
        await vipEdit(formData)
    } else {
        await vipAdd(formData)
    }
    removeTab()
    router.back()
}
onMounted(() => {
  // qiye().then(res=>{
  //   //console.log(res.data);
  //   qiyexinxi.data=res.data
  // })
  // 在这里执行与 onLoad 类似的操作
});
route.query.id && getDetails()
</script>
